<template>
  <div>
    <search @getValue="getSonValue"></search>
  </div>
  <div class="content"  >
    <!-- -->
    <div class="selectbox u-m-tb-30">
      <span>分类：</span>
      <div v-for="(item, index) in typelist" @click="changetype(index,item)" class="pointer u-m-l-20"
        :class="current == index ? 'active' : 'selectboxitem'">
        {{ item }}
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="maincontent">
      <div :class="itemcurrent == index ? 'itemactive' : ''" @click="changeitem(index)"
        class="maincontent_item pointer u-m-30" v-for="(item, index) in orglist">
        <div class="face">
          <div class="faceitem">国家级</div>
        </div>
        <img class="u-m-t-30"src="../../assets/科研平台/school.png" alt="">
        <div class="title">超级重点实验室</div>
        <p >依托单位：某某楼研究所</p>
        <p class="u-m-tb-10" >研究领域：工程</p>
        <p>所在区域：湖北 武汉</p>
      </div>
      <div v-if="orglist==''" style="height: 400px;"  >
          <el-empty class="emptybox"  description="暂无数据~" />
        </div>
    </div>

    <div class="pagniation">
      <el-pagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" 
           layout="prev, pager, next" :total="1000"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import search from '../acl/search.vue';
import { ref,getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const { proxy } = getCurrentInstance() as any;;
const current = ref(0)
const itemcurrent = ref(0)
const changeitem = (index) => {
  itemcurrent.value = index
  router.push({
    path: '/product/platformdetails',
    query: {
      id: index
    }
  })
}
const value = ref('')
const orglist:any = ref([])
const currentPage3 = ref(1)
const pageSize3 = ref(100)
function getorglist() {
  proxy.$get('/user/list/org', {
    current: currentPage3.value,
    limit: 6,
    field: value.value == '全部' ? '' : value.value,
  }).then((res: any) => {
    orglist.value = res.data.records
  })
}

getorglist()


const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  currentPage3.value = val
  getorglist()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage3.value = val
  getorglist()
}
const changetype = (index,item) => {
  current.value = index
  value.value =item
  getorglist()
}
const typelist = ['全部', '国家级', '省级', '校级', '科技示范基地']
const getSonValue = (e) => {
  console.log(e);//子组件传入的值
}

</script>
<style lang="scss" scoped>
.content {
  margin: 50px auto;
  box-sizing: border-box;
  position: relative;
  width: 1180px;
  .maincontent {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;

    .itemactive {
      box-shadow: 1px 1px 5px 1px $text-color;
    }

    .maincontent_item {
      position: relative;
      padding: 30px;
      box-sizing: border-box;
      width: 20%;
      font-size: 14px;
      .title{
        padding: 10px 0;
      }
      img{
        width: 200px;
        height: 180px;
      }
      >p{
      font-size: 14px;

        color: #999;
      }
      .face {
        position: absolute;
        left: 0px;
        top: 15px;

        .faceitem {
          letter-spacing: .2rem;
          color: #fff;
          font-size: 20px;
          padding: 5px 10px;
          border-radius: 0 50px 50px 0;
          text-align: center;
          background: linear-gradient(to right, #fea722, #f67001);
        }
      }
    }
  }

  .pagniation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
  }

  .selectbox {
    display: flex;
    align-items: center;
    font-size: 14px;
    width: 100%;
    .selectboxitem {
      border-radius: 10px;
      padding: 8px 30px;
      border: 1px solid #999;
    }

    .active {
      border-radius: 10px;
      padding: 9px 30px;
      color: #fff;
      background-color: rgb(12, 160, 250);
    }
  }
}
</style>